<template>
    <div class="add-card">
        <header class="add-header">
            <el-page-header :content="this.$route.query.id ? '编辑规则' : '增加规则'" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">规则信息</div>
                <div class="form">
                    <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
                        <el-form-item label="计算规则编号" prop="ruleNumber">
                            <el-input v-model="form.ruleNumber" width="100px" />
                        </el-form-item>
                        <el-form-item label="计算规则名称" prop="ruleName">
                            <el-input v-model="form.ruleName" />
                        </el-form-item>
                        <el-form-item label="计费方式" prop="chargeType" style="width:100%">
                            <el-radio-group v-model="form.chargeType" @change="change" size="medium">
                                <el-radio border label="turn">按次收费
                                </el-radio>
                                <el-radio border label="duration">时长收费
                                </el-radio>
                                <el-radio border label="partition">分段收费
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="免费时长" prop="freeDuration">
                            <el-input-number v-model="form.freeDuration" @change="handleChange" :min="1" :max="100"
                                label="描述文字"></el-input-number>
                        </el-form-item>
                        <el-form-item label="收费上限" prop="chargeCeiling">
                            <el-input v-model="form.chargeCeiling" />
                        </el-form-item>
                        <!-- <el-form-item label="计费规则" style="width:100%">
                            
                            <div v-if="form.chargeType === 'duration'" class="duration">
                                每<el-input-number v-model="form.durationTime" controls-position="right"
                                    @change="handleChange" :min="1" :max="999" label="描述文字" class="input-box">
                                </el-input-number> 小时 <el-input v-model="form.durationPrice" class="input-box" /> 元
                            </div>
                            
                            <div v-if="form.chargeType === 'turn'" class="turn">
                                每次 <el-input v-model="form.turnPrice" class="input-box" /> 元
                            </div>
                            
                            <div v-if="form.chargeType === 'partition'" class="partition">
                                <div class="item"> <el-input-number v-model="form.partitionFrameTime"
                                        controls-position="right" @change="handleChange" :min="1" :max="990" label="描述文字"
                                        class="input-box"></el-input-number>小时内,每小时收费<el-input
                                        v-model="form.partitionFramePrice" class="input-box" /> 元</div>
                                <div class="item">每增加 <el-input-number v-model="form.partitionFrameTime"
                                        controls-position="right" @change="handleChange" :min="1" :max="990" label="描述文字"
                                        class="input-box"></el-input-number>小时,增加<el-input
                                        v-model="form.partitionIncreasePrice" class="input-box" /> 元</div>
                            </div>
                        </el-form-item> -->
                        <el-tabs type="card" v-model="form.chargeType" @tab-click="handleClick">
                            <div class="tabs">
                                <span>计费规则</span>
                                <el-tab-pane label="时长收费" name="duration">
                                    <el-form-item label="每" prop="durationTime">
                                        <el-input-number v-model="form.durationTime" @change="handleChange" :min="null"
                                            :max="999" label="描述文字" style="width: 100%;">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item prop="durationType" label-width="0px">
                                        <el-select v-model="form.durationType" style="width: 100%;">
                                            <el-option v-for="item in ruleTimeList" :key="item.value" :value="item.value"
                                                :label="item.Label" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="durationPrice" label-width="0px">
                                        <el-input v-model="form.durationPrice">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </el-form-item>
                                </el-tab-pane>
                                <el-tab-pane label="分段收费" name="partition">
                                    <el-form-item label="在" prop="partitionFrameTime">
                                        <el-input-number v-model="form.partitionFrameTime" @change="handleChange"
                                            :min="null" :max="990" label="描述文字" style="width: 100%;"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="时间内，每小时" prop="partitionFramePrice">
                                        <el-input v-model="form.partitionFramePrice" style="width: 100%;">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="，每增加" prop="partitionIncreaseTime">
                                        <el-input-number v-model="form.partitionIncreaseTime" @change="handleChange"
                                            :min="null" :max="910" label="描述文字" style="width: 100%;"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="小时，增加" prop="partitionIncreasePrice">
                                        <el-input v-model="form.partitionIncreasePrice">
                                            <template slot="append">元</template></el-input>
                                    </el-form-item>
                                </el-tab-pane>
                                <el-tab-pane label="按次收费" name="turn">
                                    <el-form-item label="每次" prop="turnPrice">
                                        <el-input-number v-model="form.turnPrice" @change="handleChange" :min="null"
                                            :max="910" label="描述文字" style="width: 100%;">
                                        </el-input-number>
                                    </el-form-item>
                                </el-tab-pane>
                            </div>
                        </el-tabs>
                    </el-form>
                </div>
            </div>
        </main>
        <footer class="add-footer">
            <div class="btn-container">
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="confirmAdd">确定</el-button>
            </div>
        </footer>
    </div>
</template>
  
<script>
import { addRuleAPI, getRuleAPI, editRuleAPI } from '@/api/rule'
export default {
    data() {
        return {
            // 车辆信息表单
            activeName: '分段收费',
            ruleTimeList: [
                {
                    Label: "分钟",
                    value: "minute"
                },
                {
                    Label: "小时",
                    value: "hour"
                },
            ]
            ,
            form: {
                ruleNumber: '',
                ruleName: '',
                freeDuration: '',
                chargeCeiling: '',
                chargeType: 'turn',

                durationTime: null,
                durationPrice: null,
                durationType: null,

                turnPrice: null,

                partitionFrameTime: null,
                partitionFramePrice: null,
                partitionIncreaseTime: null,
                partitionIncreasePrice: null,
            },
            RulesList: [],
            Rules: ['ruleNumber', 'ruleName', 'chargeType', 'chargeCeiling'],
            formRules: {
                ruleNumber: [
                    {
                        required: true, message: '请输入计费规则编号', trigger: 'blur'
                    }
                ],
                ruleName: [
                    {
                        required: true, message: '请输入计费规则名称', trigger: 'blur'
                    },
                ],
                chargeType: [
                    {
                        required: true, message: '请输入收费类型', trigger: 'blur'
                    },
                ],
                chargeCeiling: [
                    {
                        required: true, message: '请输入收费上限', trigger: 'blur'
                    },
                ],
                //
                partitionFrameTime: [
                    { required: true, message: '请输入时间', trigger: 'blur' },

                ],
                partitionFramePrice: [
                    {
                        required: true, message: '请输入收费价格', trigger: 'blur'
                    }
                ],
                partitionIncreaseTime: [
                    {
                        required: true, message: '请输入时间', trigger: 'blur'
                    }
                ],
                partitionIncreasePrice: [
                    {
                        required: true, message: '请输入收费价格', trigger: 'blur'
                    }
                ],
                //
                durationTime: [
                    {
                        required: true, message: '请输入时间', trigger: 'blur'
                    }
                ],
                durationPrice: [
                    {
                        required: true, message: '请输入收费价格', trigger: 'blur'
                    }
                ],
                durationType: [
                    {
                        required: true, message: '请输入时间类型', trigger: 'blur'
                    },
                ],
                //
                turnPrice: [
                    {
                        required: true, message: '请输入每次金额', trigger: 'blur'
                    }
                ],
            },
        }
    },
    mounted() {

        if (this.$route.query.id) {
            this.getDetail(this.$route.query.id)
        } else {
            this.change('turn')
        }
    },
    methods: {
        change(value) {
            if (value === 'partition') {
                this.RulesList = [
                    ...this.Rules,
                    'partitionFrameTime',
                    'partitionFramePrice',
                    'partitionIncreaseTime',
                    'partitionIncreasePrice'
                ]
            }
            if (value === 'duration') {
                this.RulesList = [
                    ...this.Rules,
                    'durationTime',
                    'durationPrice',
                    'durationType',
                ]
            }
            if (value === 'turn') {
                this.RulesList = [
                    ...this.Rules,
                    'turnPrice'
                ]
            }
            this.$refs.form.clearValidate();
        },
        confirmAdd() {
            let validok = []
            if (this.RulesList.length === 0) {
                this.$message.error("编辑失败，该数据的收费类型字段不在库中，请删除该数据")
                this.$router.back()
            }
            this.$refs.form.validateField(this.RulesList, async valid => {
                if (!valid) {
                    validok.push(valid)
                }
                if (validok.length == this.RulesList.length && validok.every(item => item === '')) {
                    if (this.$route.query.id) {
                        // 编辑
                        await editRuleAPI(this.form).then(() => {
                            this.$message.success("编辑成功")
                            this.$router.back()
                        }).catch((error) => {
                            this.$message.error(error.response.data.msg)
                        })
                    } else {
                        // 新增
                        await addRuleAPI(this.form).then(() => {
                            this.$message.success("成功")
                            this.$router.back()
                        }).catch((error) => {
                            this.$message.error(error.response.data.msg)
                        })
                    }
                }
            })
        },
        resetForm() {
            this.$refs.form.resetFields()
            this.change('turn')
        },
        // 获取详情
        async getDetail(id) {
            const res = await getRuleAPI(id)
            this.form = res.data
            this.change(res.data.chargeType)
        },
        handleChange(data) {
        },
        handleClick(tab, event) {
        }
    }
}
</script>
  
<style scoped lang="scss">
.add-card {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;

                        .duration,
                        .turn,
                        .partition {
                            display: flex;

                            .input-box {
                                width: 30%;
                            }
                        }
                    }

                    .el-tabs {
                        width: 100%;
                    }

                    .tabs {



                        .el-tab-pane {
                            width: 100%;
                            display: flex;
                            flex-wrap: wrap;

                            .el-form-item {
                                width: 30%;
                            }
                        }
                    }


                }
            }
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }

    .add-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}
</style>